<template>
    <div class="shop">
        <div class="mask" v-if="isshow" @click="hide()"></div>
        <div class="list" v-if="isshow">
            <ul>
                <li v-for="item in list" :key="item.id">
                    <p class="title">{{ item.name }}</p>
                    <span class="list-num">
                        {{ item.num }}
                    </span>
                </li>
            </ul>
        </div>
        <div class="count">
            <div class="text">
                <div class="price" @click="show()">价钱{{ sum }}</div>
                <router-link to="/shoppingcart" tag="div" class="sum"
                    >结算</router-link
                >
            </div>
        </div>
    </div>
</template>

<script>
import { getOnePro } from "@/api/request";
export default {
    props: ["flag"],
    data() {
        return {
            isshow: false,
            list: [],
        };
    },
    created() {
        getOnePro("/getShop", `${this.$route.params.id}`).then((res) => {
            let { data } = res;
            this.list = data;
        });
    },
    watch: {
        async flag() {
            console.log("状态",this.flag);
            await getOnePro("/getShop", `${this.$route.params.id}`).then((res) => {
                console.log(res);
                let { data } = res;
                this.list = data;
            });

            // getOnePro("/getShop", `${this.$route.params.id}`).then((res) => {
            //     let { data } = res;
            //     this.list = data;
            // });
        },
    },
    methods: {
        sum() {
            let count = 0;
            this.list.forEach((item) => {
                count += item.num * item.price;
            });
            return count.toFixed(2);
        },
        pay() {
            this.$router.push("/");
        },
    },
    computed: {
        sum() {
            let count = 0;
            this.list.forEach((item) => {
                count += item.num * item.price;
            });
            return count.toFixed(2);
        },
    },
    methods: {
        show() {
            this.isshow = true;
        },
        hide() {
            this.isshow = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.shop {
    position: fixed;

    .mask {
        position: fixed;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 90;
    }
    .list {
        position: fixed;
        bottom: 1.8rem;
        left: 0;
        z-index: 99;
        width: 100%;
        background-color: #fff;
    }

    .count {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 1.8rem;
        background-color: #fff;
        .text {
            margin: 0.6rem 0.3rem 0;
            background-color: #0c0c0c;
            height: 1rem;
            line-height: 1rem;
            border-radius: 0.5rem;
            color: #f6f6f3;
            display: flex;
            justify-content: space-around;
        }
    }
}
</style>
